<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title border-bottom">
                        <div class="left">修改密码</div>
                    </div>
                    <div class="account-content">
                        <el-form ref="form" :show-message="false" status-icon :model="form" label-width="170px" label-position="left">
                            <el-form-item label="旧密码：" prop="oldpassword" required>
                                <el-input v-model="form.oldpassword" show-password></el-input>
                            </el-form-item>
                            <el-form-item label="新密码：" prop="newpassword" required>
                                <el-input v-model="form.newpassword" show-password></el-input>
                            </el-form-item>
                            <el-form-item label="新密码：" prop="renewpassword" required>
                                <el-input v-model="form.renewpassword" show-password></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button class="btn-main" :loading="updatLoading" @click="onsubmit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
    </div>
</template>

<script>
import api from "@/api/user";
export default {
    data() {
        return {
            form: {
                oldpassword: "",
                newpassword: "",
                renewpassword: ""
            },
            updatLoading: false
        };
    },
    watch: {

    },
    methods: {
        onsubmit: function () {
            var _this = this;
            _this.$refs.form.validate((valid) => {
                if (valid) {
                    if (_this.form.newpassword != _this.form.renewpassword) {
                        _this.$message.warning("新密码两次输入不一致");
                        return;
                    }
                    if (_this.form.newpassword == _this.form.oldpassword) {
                        _this.$message.warning("新旧密码不能一样");
                        return;
                    }
                    _this.$confirm(`是否确认修改密码`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.updatLoading = true;
                        api.UpdatePassword(_this.form)
                            .then((res) => {
                                _this.$message.success("提交成功");
                                _this.updatLoading = false;
                                _this.$refs.form.resetFields();
                            })
                            .catch((err) => {
                                _this.updatLoading = false;
                            })
                    })
                }
            })
            
        }
    },
    mounted: function(){
        
    }
};
</script>
<style>


</style>